<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>零件仓库</title>
</head>
<link rel="stylesheet" href="/webjars/element-ui/2.15.13/lib/theme-chalk/index.css">
<script src="/webjars/vue/2.6.14/dist/vue.js"></script>
<script src="/webjars/element-ui/2.15.13/lib/index.js"></script>
<script src="/webjars/axios/1.6.2/dist/axios.js"></script>
<body>
<style>
    body{
        background-color: white;
    }
</style>
<div id="ware">

        <div slot="header">
            <el-form inline>
                    <el-form-item label="零件名称">
                        <el-input v-model="vo.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" plain round @click="search">查询</el-button>
                        <el-button plain icon="el-icon-printer" @click="exprort" circle></el-button>
                    </el-form-item>
            </el-form>
        </div>

        <el-table :data="wareList.data" height="420" border style="width: 100%"
                  stripe>
            <el-table-column type="selection"></el-table-column>
            <el-table-column prop="wareId" label="编号">
            </el-table-column>
            <el-table-column prop="wareName" label="零件名称">
            </el-table-column>
            <el-table-column prop="warePrice" label="价格">
            </el-table-column>
            <el-table-column prop="wareNumber" label="数量">
            </el-table-column>
            <el-table-column prop="wareDate" label="入库时间">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="{row}">
                    <el-button type="info" @click="updateWare(row)" round plain size="small" >修改</el-button>
                    <el-button type="danger" @click="del(row.wareId)" round plain size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                :page-sizes="[3,6,9]"
                :current-page.sync="vo.pageNo"
                :page-size.sync="vo.pageSize"
                @current-change="search"
                @size-change="search"
                background
                layout="prev, pager, next,sizes"
                :total="wareList.count">
        </el-pagination>



    <!--    修改-->
    <el-dialog title="修改信息" :visible.sync="updateWareFlag" center>
        <el-form label-width="80px">
            <el-form-item label="零件名称">
                <el-input v-model="updateRow.wareName"></el-input>
            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="updateRow.warePrice"></el-input>
            </el-form-item>
            <el-form-item label="数量">
                <el-input v-model="updateRow.wareNumber"></el-input>
            </el-form-item>
            <el-form-item label="入库时间">
                <el-input v-model="updateRow.wareDate"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="doUpdate" type="primary">提交</el-button>
                <el-button @click="updateWareFlag=false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<script>
    new Vue({
        el:"#ware",
        data:{
            wareList:[],
            updateWareFlag: false,
            updateRow: {},
            vo:{
                name: "",
                pageNo: 1,
                pageSize: 6
            },
            ware: {
                wareName: '',
                warePrice: '',
                wareNumber: '',
                wareDate: ''

            }
        },
        methods:{
            exprort(){
                window.location.href="/bas/exportPdf";
            },
            search(){
                axios.get("/bas/selectList",{params: this.vo})
                    .then(({data})=>{
                        this.wareList = data;
                    })
            },
            //修改
            updateWare(row) {
                this.updateWareFlag = true;
                this.updateRow = row;
            },
            doUpdate() {
                axios.post('/bas/updateware', this.updateRow)
                    .then(({data}) => {
                        this.updateWareFlag = false;
                        this.$message({
                            message: data.msg,
                            type: data.code == 200 ? 'success' : 'error'
                        });
                        this.search();
                    });
            },
            //删除
            del(wareId) {
                this.$confirm("确实要删除么？", "信息提示")
                    .then(() => {
                        axios.delete("/bas/delware?wareId=" + wareId)
                            .then(({data}) => {
                                this.$message({
                                    message: data.msg,
                                    type: data.code == 200 ? 'success' : 'error'
                                });
                            });
                        this.search();
                    });
            },
        },
        mounted() {
            this.search();
        }
    })
</script>
</body>
</html>